<template>
	<view class="echarts-box">
		<!-- 图表容器 -->
		<view class="echarts" ref="echarts"></view>
	</view>
</template>

<script>
	/**
	 * HitrateChart 命中率图表
	 * @description 专家主页近期命中率图表
	 * @property {Array} rate 专家命中率数据
	 * @example <HitrateChart :rate="rate"></HitrateChart>
	 */
	import * as echarts from 'echarts/core';
	//引入直角坐标系，内置数据转换器
	import { GridComponent, TransformComponent } from 'echarts/components';
	//引入折线图
	import { LineChart } from 'echarts/charts';
	//标签自动布局，全局过度动画
	import { LabelLayout, UniversalTransition } from 'echarts/features';
	//引入canvas渲染器，注意引入CanvasRenderer或者SVGRenderer
	import { SVGRenderer } from 'echarts/renderers';
	export default {
		name: "HitrateChart",
		props: {
			rate: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		watch: {
			rate(newValue) {
				this.initChart()
			}
		},
		beforeCreate() {
			//解决 uniapp h5 下全局变量wx被重新赋值导致点击不触发的问题
			window.wx = {}
		},
		beforeMount() {
			//注册组件
			echarts.use([
				GridComponent,
				LineChart,
				TransformComponent,
				LabelLayout,
				UniversalTransition,
				SVGRenderer
			]);
		},
		mounted() {
			console.log(this.rate);
			this.initChart()
		},
		methods: {
			initChart() {
				let data = [], xData = [];
				//原始数据处理
				for(let item of this.rate){
					item.hitRate = Number(item.hitRate) > 100 ? 100 : Number(item.hitRate) //防止百分比溢出
					data.push(item.hitRate)
					xData.push(item.desc)
				}
				//查找命中率最高的数据作为已选中的数据
				let max = Math.max.apply(null, data)
				let active = data.findIndex((value)=> value == max);
				console.log(active,'active')
				//适配宽屏下的分辨率
				let dpr = 1
				let windowInfo = uni.getWindowInfo()
				if(windowInfo.windowWidth >= 525){
					dpr = 525/750
				}else{
					dpr = windowInfo.windowWidth/750
				}
				//初始化
				let myChart = echarts.init(this.$refs.echarts.$el);
				let option = {
					color: ["#FF3333"], //主色
					grid: {	//grid 组件离容器上下左右侧的距离
						left: 0,
						bottom: 0,
						height: 242*dpr,
						width: 668*dpr,
						containLabel: true,//区域是否包含坐标轴的刻度标签
					},
					xAxis: {//x 轴配置
						type: 'category',
						data: xData,//x轴数据，在type为category时需要设置
						axisTick: {//坐标周刻度相关设置
							show: true,
							alignWithLabel: true,//设置刻度线和标签对其
							length: ( data[active] / 100 ) * (200 * dpr), //x 轴刻度长度，计算方法：当前百分比 * 设计稿刻度最大高度px * 适配比例
							inside: true,//坐标轴刻度是否朝内，默认朝外
							lineStyle: {//刻度线样式设置
								color: '#FF3333'
							},
							//强制设置坐标轴分割线间隔
							interval: (index, value) => {
								if(index == active){
									return true
								}else{
									return false
								}
							}
						},
						axisLabel:　{//坐标轴刻度标签的相关设置
							color: '#999',
							margin: 20*dpr,
							fontSize: 22*dpr,
							lineHeight: 22*dpr
						},
						axisLine: {//坐标轴轴线相关设置
							lineStyle: {
								color: '#ccc'
							}
						},
						splitLine: {//坐标轴在gird区域中的分割线
							alignWithLabel: true,
							show: true,//是否显示分割线，默认数值轴显示，类目轴不显示
							lineStyle: {//分割线颜色
								color: '#E6E6E6'
							}
						}
					},
					yAxis: {//y 轴配置
						type: 'value',
						max: 100,
						min: 0,
						interval: 25,
						axisLabel: {
							color: '#999',
							margin: 20*dpr,
							fontSize: 22*dpr,
							formatter: '{value}%',//设置刻度标签的内容格式器，支持字符串模板和回调函数两种
							showMinLabel: false,//是否显示最小值的标签内容
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#ccc'
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#E6E6E6'
							}
						}
					},
					series: [//设置echarts图表的类型，通过type设置
						{
							data,
							type: 'line', //折线图,通过type决定图表类型
							triggerEvent: true, //触发事件
							symbol: (value, params)=>{//标记的图形
								if(params.dataIndex == active){
									return 'image://' + require('@/public/images/expert/dsj.png')
								}else{
									return 'image://' + require('@/public/images/expert/x.png')
								}
							},
							symbolSize: (value, params)=>{//标记的大小
								if(params.dataIndex == active){
									return 35*dpr
								}else{
									return 16*dpr
								}
							},
							symbolKeepAspect: true, //缩放时保持该图形的长宽比
							symbolOffset: (value, params)=> {//位置偏移
								if(params.dataIndex == active){
									return [0, -5.5*dpr]
								}else{
									return [0, 0]
								}
							},
							areaStyle: { //区域填充样式
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: '#FF9999' // 0% 处的颜色
									}, {
										offset: 1, color: '#fff' // 100% 处的颜色
									}],
									global: false
								}
							},
							label: {//文本标签
								show: true,
								color: '#999',
								formatter: (params)=>{
									//console.log(params);
									if(params.dataIndex == active){//选中时使用富文本
										return '{rich|'+this.rate[params.dataIndex].hitResultTxt + ' ' + params.value+'%}'
									}else{
										return params.value+'%'
									}
								},
								rich: {//富文本样式
									rich: {
										color: '#fff',
										fontSize: 20*dpr,
										backgroundColor: '#FF3333',
										padding: 10*dpr,
										borderRadius: 4*dpr,
										verticalAlign: 'middle'
									}
								}
							},
							labelLayout: (params)=>{
								//console.log(params);
								if(active == params.dataIndex){
									if(data.length == 4){//标签的偏移距离
										if(params.dataIndex == 0){
											return {
												x: params.labelRect.x + 10,
												y: params.labelRect.y + 5
											}
										}
										if(params.dataIndex == 3){
											return {
												x: params.labelRect.x - 10,
												y: params.labelRect.y + 5
											}
										}
									}
									return {
										x: params.labelRect.x,
										y: params.labelRect.y + 5
									}
								}
							}
						}
					]
				};
				myChart.off('click'); //先清除点击事件
				myChart.setOption(option); //设置图表配置
				//点击图表空白处也会触发
				myChart.getZr().on('click', (params) => {//点击事件
					console.log(params);
					if(typeof params.dataIndex == 'undefined'){
						const pointInPixel = [params.offsetX, params.offsetY]
						if (myChart.containPixel('grid', pointInPixel)) {
							active = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0]
						}
					}else{
						active = params.dataIndex
					}
					myChart.setOption({
						xAxis: {
							axisTick: {
								length: ( data[active] / 100 ) * (200 * dpr), //更新 x 轴刻度长度
							}
						}
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.echarts-box{
		width: 710rpx;
		height: 368rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		.echarts{
			box-sizing: border-box;
			width: 710rpx;
			height: 368rpx;
			padding: 30rpx 20rpx;
		}
	}
</style>
